<template>
  <div id="header">
    <a-row class="grid-demo" style="margin-bottom: 16px">
      <a-col flex="auto">
        <div>
          <a-menu
            mode="horizontal"
            :selected-keys="selectKey"
            @menu-item-click="doMenuClick"
          >
            <a-menu-item
              key="0"
              :style="{ padding: 0, marginRight: '38px' }"
              disabled
            >
              <div>
                <img src="src/assets/titlelogo.png" />
              </div>
            </a-menu-item>
            <a-menu-item v-for="item in displayRoute" :key="item.path">
              {{ item.name }}
            </a-menu-item>
          </a-menu>
        </div>
      </a-col>
      <a-col flex="100px">
        <div>{{ store.state.userInfo?.username ?? "未登录" }}</div>
      </a-col>
    </a-row>
  </div>
</template>

<script setup lang="ts">
import { routes } from "@/router/routes";
import { useRouter } from "vue-router";
import { computed, ref } from "vue";
import { useStore } from "vuex";
import checkUserAccess from "@/access/checkUserAccess";
import accessEnum from "@/access/accessEnum";

const router = useRouter();
const store = useStore();

// 定义需要显示的页面路由集合,通过computed进行页面权限过滤
const displayRoute = computed(() => {
  return routes.filter((item, index) => {
    // 如果路由中meta中存在viewHide属性，则过滤掉
    if (item.meta?.viewHide) {
      return false;
    }
    //  根据权限判断是否显示该页面
    if (!checkUserAccess(store.state.userInfo, item?.meta?.access as string)) {
      return false;
    }
    return true;
  });
});
const selectKey = ref(["/"]);
// 监听路由的变化，路由更新后，将当前路由的path赋值给selectKey，让菜单高亮
router.afterEach((to, from, failure) => {
  selectKey.value = [to.path];
});

const doMenuClick = (key: string) => {
  router.push({
    path: key,
  });
};
// 设置假数据登录时间
setTimeout(() => {
  store.dispatch("setUserInfo", {
    username: "lack",
    userRole: accessEnum.Admin,
  });
}, 5000);
</script>

<style scoped>
#header {
  box-shadow: #aaa 0 1px 1px;
}
</style>
